<!DOCTYPE html>
<html  lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--360浏览器优先以webkit内核解析-->
    <title>压力垫</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link href="../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
    <link href="../static/css/style.min.css" th:href="@{/css/style.min.css}" rel="stylesheet"/>
</head>

<body class="gray-bg">
<div class="wrapper wrapper-content">
    <div class="row">
        <h2 align="center">压力垫</h2>
        <div class="panel-body">
            <div class="box"></div>
        </div>
    </div>
</div>
<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<script th:src="@{/ajax/libs/layer/layer.min.js}"></script>
<script th:src="@{/js/sockjs.min.js}"></script>
<script th:src="@{/js/stomp.js}"></script>
<th:block th:include="include :: footer" />
<th:block th:include="include :: datetimepicker-js" />
<script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.3.3/dist/echarts.min.js"></script>
<script type="text/javascript">
    // $(function () {
    //     webSocket();
    // });
    // $(document).keypress(function(e){
    //     switch (e.keyCode){
    //         case 32:
    //             alert("你按下了空格");
    //             return;
    //     }
    // });
    $(document).keyup(function(e){
        alert(e.keyCode);
    });
    function webSocket(){
        var stomp = null;
        var url = "https://sunfu.xdkdate.com/webSocket";
        // var url = "http://localhost:8009/webSocket"
        var socket = new SockJS(url);
        stomp = Stomp.over(socket);
        //连接
        stomp.connect({}, function (frame) {
            //订阅广播
            stomp.subscribe("/user/cushion/message", function (res) {
                var obj = eval('('+res.body+')');
                console.log(obj);
                var data = obj.data;
                var html = "";
                for (var i = 0; i < data.length; i++) {
                    if(data[i] == 0){
                        html += "<div class='box0'></div>";
                    }
                    if(data[i] == 1){
                        html += "<div class='box1'></div>";
                    }
                }
            });
        });
    }
</script>
<style>
    .box{
        width:840px;
        display: flex;
        flex-wrap: wrap;
    }
    .box1{
        width:10px;
        height:10px;
        margin: 10px;
        background: red;
        border-radius: 50%;
        display: inline-block;
    }
    .box0{
        width:10px;
        height:10px;
        margin: 10px;
        background: black;
        border-radius: 50%;
        display: inline-block;
    }
</body>
</html>
